<template>
	<view class="ranking-page">
		<view class="tabs-box">
			<view class="item" :class="{ 'active': active === 4 }" @click="activeChange(4)">总榜</view>
			<view class="item" :class="{ 'active': active === 1 }" @click="activeChange(1)">日榜</view>
			<view class="item" :class="{ 'active': active === 2 }" @click="activeChange(2)">周榜</view>
			<view class="item" :class="{ 'active': active === 3 }" @click="activeChange(3)">月榜</view>
		</view>
		<image class="page-bg" src="@/static/paihangbang.png" mode="widthFix"></image>
		<view class="container">
			<view class="me-box">
				<view class="number">
					<text v-if="rank == 0">无</text>
					<text v-else>{{ rank }}</text>
				</view>
				<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="name">{{ userInfo.name }}</view>
				<view class="people" @click="show = !show">
					<view class="text">
						<text>邀请</text>
						<text class="value" v-if="show">{{ self_num }}</text>
						<text class="value" v-else>*</text>
						<text>人</text>
					</view>
					<u-icon :name="show ? 'eye-fill' : 'eye-off'" color="#666" size="26rpx"></u-icon>
				</view>
			</view>
			<view class="top-box" v-if="rankingList.length">
				<view class="two item">
					<view class="avatar-box">
						<image class="frame" src="@/static/2.png" mode="aspectFill"></image>
						<image class="avatar" :src="rankingList[1].user.avatar" mode="aspectFill"></image>
					</view>
					<view class="name u-line-1">{{ rankingList[1].user.name }}</view>
					<view class="number">{{ rankingList[1].invite_count }}</view>
				</view>
				<view class="one item">
					<view class="avatar-box">
						<image class="frame" src="@/static/1.png" mode="aspectFill"></image>
						<image class="avatar" :src="rankingList[0].user.avatar" mode="aspectFill"></image>
					</view>
					<view class="name u-line-1">{{ rankingList[0].user.name }}</view>
					<view class="number">{{ rankingList[0].invite_count }}</view>
				</view>
				<view class="three item">
					<view class="avatar-box">
						<image class="frame" src="@/static/3.png" mode="aspectFill"></image>
						<image class="avatar" :src="rankingList[2].user.avatar" mode="aspectFill"></image>
					</view>
					<view class="name u-line-1">{{ rankingList[2].user.name }}</view>
					<view class="number">{{ rankingList[2].invite_count }}</view>
				</view>
			</view>
			<view class="list-box" v-if="rankingList.length > 3">
				<view class="item" v-for="(item, index) in rankingList.slice(3)" :key="index">
					<view class="number">{{ index + 4 }}</view>
					<image class="avatar" :src="item.user.avatar" mode="aspectFill"></image>
					<view class="name">{{ item.user.name }}</view>
					<view class="people">
						<view class="text">
							<text>邀请</text>
							<text class="value">{{ item.invite_count }}</text>
							<text>人</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRankingList, getMaterial } from '@/api/api'
	
	export default {
		data() {
			return {
				active: 4,
				show: false,
				
				/* 用户信息 */
				rank: '无',
				self_num: 0,
				userInfo: {},
				
				/* 排行榜数据 */
				rankingList: [],
			}
		},
		onLoad () {
			this.loadData()
		},
		methods: {
			loadData () {
				getMaterial().then(res => {
					if (res) {
						this.userInfo = res.data.data
					}
				})
				
				this.getRankingData()
			},
			getRankingData () {
				getRankingList({ type: this.active }).then(res => {
					if (res) {
						this.rankingList = res.data.list
						
						this.rank = res.data.num
						this.self_num = res.data.self_num
					}
				})
			},
			activeChange (index) {
				this.active = index
				this.getRankingData()
			}
		}
	}
</script>

<style lang="scss">
.ranking-page {
	position: relative;
	.tabs-box {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 92rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.item {
			width: 120rpx;
			height: 68rpx;
			border-radius: 68rpx;
			color: #333;
			font-size: 28rpx;
			text-align: center;
			line-height: 68rpx;
			&.active {
				color: #5749f7;
				font-size: 30rpx;
				font-weight: bold;
				background-color: #eeecfe;
			}
		}
	}
	.page-bg {
		position: absolute;
		top: 92rpx;
		left: 0;
		z-index: 0;
		width: 750rpx;
	}
	.container {
		position: relative;
		z-index: 4;
		padding: 190rpx 40rpx 40rpx;
		.me-box {
			height: 120rpx;
			padding-right: 30rpx;
			border-radius: 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			.number {
				width: 100rpx;
				color: #666;
				font-size: 26rpx;
				text-align: center;
			}
			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.name {
				flex: 1;
				margin-left: 20rpx;
				color: #333;
				font-size: 26rpx;
			}
			.people {
				display: flex;
				align-items: center;
				.text {
					color: #666;
					font-size: 26rpx;
					.value {
						color: #ff4c0d;
					}
				}
			}
		}
		.top-box {
			margin-top: 38rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.item {
				border-radius: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.two {
				width: 200rpx;
				height: 320rpx;
				background: linear-gradient(0deg, #f8fdff, #e2f6ff);
			}
			.one {
				width: 234rpx;
				height: 366rpx;
				border-radius: 40rpx;
				background: linear-gradient(0deg, #fffdf9, #fde5b8);
			}
			.three {
				width: 200rpx;
				height: 320rpx;
				border-radius: 40rpx;
				background: linear-gradient(0deg, #fffbf8, #fce9dd);
			}
			.avatar-box {
				position: relative;
				.frame {
					width: 120rpx;
					height: 164rpx;
					position: relative;
					z-index: 10;
				}
				.avatar {
					position: absolute;
					bottom: 14rpx;
					left: 10rpx;
					z-index: 0;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.name {
				margin-top: 24rpx;
				color: #333333;
				font-size: 26rpx;
			}
			.number {
				margin-top: 16rpx;
				color: #ff4c0d;
				font-size: 22rpx;
			}
		}
		.list-box {
			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				.number {
					width: 100rpx;
					color: #333;
					font-size: 26rpx;
					text-align: center;
				}
				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.name {
					flex: 1;
					margin-left: 20rpx;
					color: #333;
					font-size: 26rpx;
				}
				.people {
					display: flex;
					align-items: center;
					.text {
						color: #666;
						font-size: 26rpx;
						.value {
							color: #ff4c0d;
						}
					}
				}
			}
		}
	}
}
</style>
